<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>测试左右值树型菜单</title>

	<script src="./js/jquery-1.8.0.min.js" type="application/javascript"></script>
	<script src="./js/sys-menu.js" type="application/javascript"></script>
	<link href="./css/sys-menu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<form id="insertPanel">
		新增：
		<label for="name">节点名称：</label><input id="name" name="name" type="text"/>
		<label for="pid">父节点ID：</label><input id="pid" name="pid" type="text"/>
		<input value="提交" type="button" onclick="insert()"/>
	</form>

	<form id="movePanel">
		移动：
		<label for="id">节点ID：</label><input id="id" name="id" type="text"/>
		<label for="targetPid">目标父节点ID：</label><input id="targetPid" name="targetPid" type="text"/>
		<input value="提交" type="button" onclick="move()"/>
	</form>

	<hr/>

	<div>
		<input value="刷新" type="button" onclick="loadTree()"/>
		<a target="_blank" href="./pyramid" style="margin-left: 10px;">独立展示左右值树型数据倒金字塔图</a>
		<a target="_blank" href="./swagger-ui.html#/sys-menu-rest-controller" style="margin-left: 10px;">SwaggerAPI页面</a>
	</div>

	<div id="treePanel" style="margin-top: 5px; max-height: 600px; overflow-y: scroll; display: inline-block;">
		<table border="1" cellpadding="0" cellspacing="0" style='border-collapse:collapse; border-spacing: 0;'>
			<thead>
			<tr>
				<th>ID</th>
				<th>父ID</th>
				<th>根ID</th>
				<th style='text-align: right'>左值</th>
				<th class='name-head'>节点名称</th>
				<th>右值</th>
				<th>子节点数</th>
				<th>层级</th>
				<th>类型</th>
				<th>操作</th>
				<th>错误检测</th>
			</tr>
			</thead>
			<tbody id="treeTableBody">
			</tbody>
		</table>
	</div>

	<div id="pyramidPanel" style="margin-top: 20px;"></div>

	<script>
		// 注：这行代码注释掉，将不会展示倒金字塔图
		window.callback = (menuList) => buildPyramid(menuList, "pyramidPanel").hide().fadeIn(400);

		loadTree();
	</script>
</body>
</html>